<style>
  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-fade-enter-active {
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
  }
  .slide-fade-leave-active {
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
  }
  .slide-fade-enter, .slide-fade-leave-active {
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    opacity: 0;
  }
  /* 设置持续时间和动画函数 */
  .display-none-enter-active {
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
  }
  .display-none-leave-active {
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
  }
  .display-none-enter, .display-none-leave-active {
    opacity: 0;
  }
  input[name=account],input[name=name],input[name=phone],input[name=service]{
    font-size: 0.5rem;
    width: 5.57rem;
    line-height: 0.84rem;
    height: 0.84rem;
    padding: 0 0.2rem;
    color: #000;
    border: none;
    border-radius: 0;
    /*解决input尺寸兼容*/
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-color:transparent;
    z-index: 2;
    /*background-color:rgba(255,0,255,0.4);*/
  }
  input[name=account]{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -0.9rem;
    margin-left: -1.9rem;
  }
  input[name=name]{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 0.24rem;
    margin-left: -1.9rem;
  }
  input[name=phone]{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 1.35rem;
    margin-left: -1.9rem;
  }
  input[name=service]{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 2.35rem;
    margin-left: -1.9rem;
  }
  .leader input[name=account]{
    margin-top: -1.3rem;
  }
  .leader input[name=name]{
    margin-top: -0.2rem;
  }
  .leader input[name=phone]{
    margin-top: 0.9rem;
  }
  .leader input[name=service]{
    margin-top: 2rem;
  }
  .leader .btn-close{
    margin-top: -5.3rem;
    margin-left: 3.6rem;
  }
  .memeber .btn-close{
    margin-top: -4.9rem;
    margin-left: 3.6rem;
  }
  .vh{
    visibility: hidden;
  }
  .rel{
    position: relative;
  }
  .abs{
    position: absolute;
  }
  .zx99{
    z-index: 99;
  }
  .w100{
    width: 100%;
  }
  .h100{
    height: 100%;
  }
  .vc{
    top: 50%;
    margin-top: -3.8rem;
  }
  .table{display:table;background-size:cover;background-repeat:no-repeat;background-position:50%;width:10rem;height:100%}
  .tablecell{display:table-cell;vertical-align:middle;margin:auto;table-layout:fixed;padding:auto;overflow:hidden;position:relative;width:100%;height:100%}
  .main-layer{
    position: relative;
    background: url('../public/static/images/home_b1.jpg') no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
  }
  .home-layer{
    position: relative;
    /*background: url('../public/static/images/home.jpg') no-repeat;*/
    background-size: 100% auto;
  }
  .pop-layer{
    position: absolute;
    top: 0rem;
    bottom: 0;
    width: 100%;
    height:100%;
    z-index: 99;
  }
  .layer{
    position: absolute;
    width: 100%;
  }
  .layer img{
    width: 100%;
  }
  .btn-attend{
    top: 2.9rem;
    left:5rem;
    width:5rem;
    height:1.6rem;
    /*background-color: rgba(0,255,255,0.4);*/
    background-image:url('../public/static/images/btn_attend.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 40% auto;
    z-index: 9;
  }
  .main-layer .btn-attend-active{
    background-image:url('../public/static/images/btn_attended.png');    
    background-size: 84% auto;
  }
  .btn-goshop{
    top: 2.9rem;
    left: 0;
    width: 2.44rem;
    height: 1.6rem;
    /*background-color: rgba(0,255,255,0.4);*/
    z-index: 9;
  }
  .btn-goserver{
    top: 2.9rem;
    left: 2.5rem;
    width: 2.5rem;
    height: 1.6rem;
    /*background-color: rgba(0,255,255,0.4);*/
    z-index: 9;
  }
  .bg-mask{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8);
    z-index: -1;
  }
  .btn-close{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: 3.5rem;
    margin-top: -3.7rem;
    width: 0.6rem;
    height: 0.6rem;
    background:url('../public/static/images/btn_close.png') no-repeat;
    background-size: 100% auto;
    z-index: 1;
  }
  .btn-submit{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -3.8rem;
    margin-top: 3rem;
    width: 7.6rem;
    height: 1.6rem;
    /*background-color: rgba(0,255,0,0.4);*/
  }
  .btn-share{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -4rem;
    margin-top: 1.4rem;
    width: 8rem;
    height: 2rem;
    /*background-color: rgba(0,255,0,0.4);*/
  }
  .btn-rule{
    position: absolute;
    z-index: 98;
    top: 0.4rem;
    right: 0.6rem;
    width: 2.4rem;
    height: 1rem;
    background:url('../public/static/images/btn_rule.png') no-repeat center;
    background-size: 100% auto;
  }
  .btn-rule-black{
    position: absolute;
    z-index: 98;
    top: 0.4rem;
    right: 0.6rem;
    width: 2.4rem;
    height: 1rem;
    background:url('../public/static/images/btn_rule2.png') no-repeat center;
    background-size: 100% auto;
  }
  .logo{
    position: absolute;
    z-index: 98;
    top: 0.4rem;
    left: 0.6rem;
    width: 2.4rem;
    height: 1rem;
    background:url('../public/static/images/logo.png') no-repeat center;
    background-size: 100% auto;
  }
  .logo-black{
    position: absolute;
    z-index: 98;
    top: 0.4rem;
    left: 0.6rem;
    width: 2.4rem;
    height: 1rem;
    background:url('../public/static/images/logo2.png') no-repeat center;
    background-size: 100% auto;
  }
  .btn-create{
    position: absolute;
    z-index: 1;
    left:1rem;
    bottom:1rem;
    width: 8rem;
    height: 2rem;
    /*background-color: rgba(0,255,0,0.4);*/
  }
  .eff-drag{
    transition: all 0.2s;
    -webkit-filter: blur(8px);  
       -moz-filter: blur(8px);  
        -ms-filter: blur(8px);      
            filter: blur(8px);
  }
  .text-iteam{
    top: 1rem;
    right: 0.4rem;
    width: 3.4rem;
    height: 0.9rem;
    line-height: 0.9rem;
    text-align: right;
    z-index: 9;
    /*background-color: rgba(255,0,255,0.5);*/
    font-size: 0.5rem;
    color: #1d0e00;
  }
  .text-scroll{
    position: relative;
    margin:0 auto;
    overflow-y: hidden;
    overflow-x: hidden;
    -webkit-overflow-scrolling : touch;
    -moz-overflow-scrolling : touch;
    -ms-overflow-scrolling : touch;
    overflow-scrolling : touch;
    width: 86%;
  }
  .member-iteam{
    top: 1rem;
    left: 0.5rem;
    width: 6.4rem;
    height: 1.6rem;
    line-height: 0.9rem;
    z-index: 9;
    /*background-color: rgba(255,0,255,0.5);*/
    font-size: 0.5rem;
    color: #faf3e3;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    /* ios 流畅滚动 */
    -webkit-overflow-scrolling : touch;
    -moz-overflow-scrolling : touch;
    -ms-overflow-scrolling : touch;
    overflow-scrolling : touch;
  }
  .member-iteam span{
    margin-right:0.2rem;
    display: inline-block;
  }
  .member-iteam img{
    display: block;
    /*margin-bottom: 0.12rem;*/
    /*margin-right: 0.2rem;*/
    width: 0.9rem;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
  }
  .member-iteam em{
    display: block;
    padding: 0 0.2rem;
    line-height: 0.4rem;
    font-size: 0.2rem;
    color: #000;
    font-style: normal;
  }
  .member-iteam-more{
    top: 0.6rem;
  }
  .member-iteam-more img{
    width: 0.8rem;
  }
  .rule-body .btn-close{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: 3.5rem;
    margin-top: -6.5rem;
    width: 0.6rem;
    height: 0.6rem;
  }
  .tap-none{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9rem;
    height: 8.2rem;
    margin-left: -4.5rem;
    margin-top: -5.2rem;
  }
  .leader .tap-none{
    margin-top: -4.7rem;
  }
  .leader .btn-submit{
    margin-top: 3.6rem;
  }
  .home_2{
     /*display:none;*/
     position: relative;
     width:100%;
     overflow:hidden;
     text-align:center;
     background:url('../public/static/images/line.png') center center;
     background-repeat:repeat;
     background-size:100% auto; 
  }
  .home_top{
    position: absolute;
    width:100%;
    height:100%;
    font-size:0;
    background-image:url('../public/static/images/home_b1.jpg');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position:center bottom;
  }
  .home_bottom{
    position: absolute;
    font-size:0;
    width:100%;
    height:4.5rem;
    bottom:0;
  }
  .home_leader{
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .home_bg{
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../public/static/images/kv.jpg') no-repeat center bottom;
    background-size: 100% auto;
  }
  .text_02{
     color:#ad181f;
     font-style: normal;
  }
</style>
<template>
  <div class="rel h100">
    <!-- 遮罩 -->
    <transition name="display-none">
    <div id="pop" class="pop-layer" v-show="status.mask">
      <div class="table">
        <!-- 参团 -->
        <transition name="slide-fade" v-if="iteam.total>0">
          <div class="tablecell memeber" v-show="status.attend" @click="closePop" data-close>
            <div class="btn-close" @click="closePop" data-close></div>
            <input name="account" type="text" v-model="user.account"/>
            <input name="name" type="text" v-model="user.name"/>
            <input name="phone" type="number" v-model="user.phone"/>
            <div id="submit" class="btn-submit" @click="ajaxAttend"></div>
            <div class="tap-none"></div>
            <img class="w100" src="static/images/pop1.png" @click="closePop" data-close/>      
          </div>
        </transition>
        <!-- 参团-团长 -->
        <transition name="slide-fade" v-if="iteam.total<=0">
          <div class="tablecell leader" v-show="status.attend" @click="closePop" data-close>
            <div class="btn-close" @click="closePop" data-close></div>
            <input name="account" type="text" v-model="user.account"/>
            <input name="name" type="text" v-model="user.name"/>
            <input name="phone" type="number" v-model="user.phone"/>
            <input name="service" type="text" v-model="user.service"/>
            <div id="submit" class="btn-submit" @click="ajaxAttend"></div>
            <div class="tap-none"></div>
            <img class="w100" src="static/images/pop1_1.png" @click="closePop" data-close/>      
          </div>
        </transition>
        <!-- 查看店铺 -->
        <transition name="slide-fade">
        <div class="tablecell" v-show="status.shop">
          <div class="btn-close" @click="closePop" data-close></div>
          <img class="w100" src="static/images/pop2.png" @click="closePop" data-close/>      
        </div>
        </transition>
        <!-- 微信分享 -->
        <transition name="slide-fade">
        <div class="tablecell" v-show="status.wxshare">
          <img class="w100" src="static/images/arrow.png" @click="closePop" data-close/>      
        </div>
        </transition>
        <!-- 报名成功 -->
        <transition name="slide-fade">
        <div class="tablecell" v-show="status.attendSuccess">
          <div class="btn-close" @click="closePop" data-close></div>
          <div id="share" class="btn-share" @click="appShare"></div>
          <!-- 建团 -->
          <img v-if="iteam.total==0" class="w100" src="static/images/pop3_1.png"/>      
          <!-- 报团 -->
          <img v-if="iteam.total>0" class="w100" src="static/images/pop3_2.png"/>      
        </div>
        </transition>
        <!-- 规则 -->
        <transition name="slide-fade">
        <div class="tablecell rule-body" v-show="status.rule" @click="closePop" data-close>
          <div class="btn-close" @click="closePop" data-close></div>
          <img class="w100" src="static/images/rule.png"/>      
        </div>
        </transition>
        <!-- 遮罩 -->
        <transition name="display-none">
        <div class="bg-mask" v-show="status.mask" @click="closePop" data-close></div>
        </transition>
      </div>
    </div>
    </transition>

    <div class="abs w100 h100">

      <!-- 规则 -->
      <div class="btn-rule" @click="showRule" v-if="iteam.total>0"></div>
      <!-- 规则 -->
      <div class="btn-rule-black" @click="showRule" v-if="iteam.total==0"></div>
      <!-- logo -->
      <div class="logo" v-if="iteam.total>0"></div>
      <!-- logo -->
      <div class="logo-black" v-if="iteam.total==0"></div>
      <!-- 团长 -->
      <div v-if="iteam.total==0" v-show="!user.isAttended" class="home_leader" style="z-index:97;">
        <div class="btn-create" @click="showAttend"></div>
        <div class="home_bg"></div>
      </div>
      <div class="main-layer w100 h100">
          <div class="home_bottom"><!--
          --><div id="attend" :class="!user.isAttended?'layer btn-attend':'layer btn-attend btn-attend-active'" @click="showAttend"></div>
            <div id="goshop" class="layer btn-goshop" @click="showShop"></div>
            <div id="goserver" class="layer btn-goserver" @click="showServer"></div>
            <div :class="iteam.total<=5?'layer member-iteam':'layer member-iteam member-iteam-more'">
              <span v-for="(imgurl,index) in iteam.avatar"><img :src="imgurl"/><em>{{iteam['realname'][index]}}...</em></span>
            </div>
            <div class="layer text-iteam"><em class="text_02">{{iteam.total}}</em> 人已参团</div><!--
          --><img id="home_3" class="w100" style="font-size:0" src="static/images/home_b2.jpg"/> 
          </div> 
      </div>

    </div>
  </div>
</template>
<script>

import util from './assets/util.js';

export default {
    data(){
      return{
        iteam:{
          id:0,
          avatar:[],//头像
          realname:[],//头像
          total:0//已参团人数
        },
        user:{
          isAttended:false,
          account:'',
          name:'',
          phone:'',
          service:''//推荐客服
        },
        status:{
          scroll:true,
          attend:false,
          shop:false,
          mask:false,
          attendSuccess:false,
          wxshare:false,
          ajaxAttend:true,
          rule:false
        }
      }
    },
    mounted(){
      window._app = this;
/*      $('html,body,div').on('touchmove',function(e){
          if(_app.status.scroll&&e.target!=$('#text').get(0)){
            return false;
          }
      });*/
      // alert($('.home-layer').height());
      $(window).on('load',function(){
        // alert(3);
        if(window.osType=='ios'){
          $(window).on('resize',function(){
            // $('#home_2,.text-scroll').height(window.innerHeight-$('#home_1').height()-$('#home_3').height()+3+'px').show();
          });          
        }


/*        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, isPassive() ? {
          capture: false,
          passive: false
        } : false); 

        function isPassive() {
            var supportsPassiveOption = false;
            try {
                addEventListener("test", null, Object.defineProperty({}, 'passive', {
                    get: function () {
                        supportsPassiveOption = true;
                    }
                }));
            } catch(e) {}
            return supportsPassiveOption;
        } */     

        // setTimeout(function(){
          // $('#home_2,.text-scroll').height(window.innerHeight-$('#home_1').height()-$('#home_3').height()+3+'px').show();
          //移除滚动条
          // var myScroll = new IScroll('.text-scroll', {
          //     scrollbars: true,
          //     mouseWheel: true,
          //     interactiveScrollbars: true,
          //     shrinkScrollbars: 'scale',
          //     fadeScrollbars: false
          //   });
        // },200);
        // $('.table').css({height:window.innerHeight+'px'});
        // $('.bg-mask').css({width:$(document).width()+'px',height:$(document).height()+'px'});
        // $('.pop-layer').parent().css({height:$(document).height()+'px'});
        //淘宝报名成功分享
        if(util.url.getCookie('share')=='123'&&Tida.isSupportedApp){
          _app.showShare();
          util.url.delCookie('share');
        }
        //微信报名成功分享
        if(util.url.getCookie('share')=='123'&&!Tida.isSupportedApp){
          _app.showWxshare();
          util.url.delCookie('share');
        } 
        $('#loading').hide();         
      });

      _app.ajaxGetList();

    },
    methods: {
      showShare:function(){
        _app.status.attendSuccess = true;
        _app.status.mask = true;
        $('body').scrollTop( $('body')[0].scrollHeight );
        _app.status.scroll = false;
        $('.main-layer').addClass('eff-drag');
      },
      showAttend:function(){
        if(!_app.user.isAttended){//未报名
          $('.main-layer').addClass('eff-drag');
          _app.status.attend = true;
          _app.status.mask = true;
          _app.status.scroll = false;
        }else{//已报名
          _app.appShare();
        }
      },
      showShop:function(){
        if(Tida.isSupportedApp){
          location.href="https://fotile.m.tmall.com";
        }else{
          alert('进入店铺');
          /*  移除微信
          _app.status.shop = true;
          _app.status.mask = true;
          _app.status.scroll = false;          
          $('.main-layer').addClass('eff-drag');
          */
        }
      },
      showRule:function(){
          _app.status.rule = true;
          _app.status.mask = true;
      },
      showWxshare:function(){
        _app.status.wxshare = true;
        _app.status.mask = true;
        _app.status.scroll = false;          
        $('.main-layer').addClass('eff-drag');
      },
      showServer:function(){
        if(Tida.isSupportedApp){
          location.href="https://im.m.taobao.com/ww/ad_ww_dialog.htm?to_user=t73Mq7nZt73G7L2iteo%3D&shop_id=64661419";
        }else{
           alert('咨询店铺');
          /*  移除微信
          _app.status.shop = true;
          _app.status.mask = true;
          _app.status.scroll = false;  
          */     
        }
      },
      closePop:function(ev){//关闭弹窗
        if($(ev.target).attr('data-close')!='') return;
        _app.status.scroll = true;
        _app.status.shop = false;
        _app.status.attend = false;
        _app.status.attendSuccess = false;
        _app.status.mask = false;
        _app.status.rule = false;
        $('.main-layer').removeClass('eff-drag');
      },
      ajaxGetList:function(){
        var mixnick = _storage.get('mixnick');

        //获取数据
        $.ajax({
          url:'/groupon/iteam/list',
          type:'POST',
          dataType:'json',
          data:{mixnick:mixnick,id:util.url.params('id')},
          success:function(result){
            if(!result.errCode){
              if(result.data.attend&&result.data.iteamid!=util.url.params('id')){//已参加在看别人的团
                // alert(4);
                location.href = 'https://vrbuy.ews.m.jaeapp.com/groupon/index.html?id='+result.data.iteamid;
              }
              _app.iteam.total = result.data.avatar.length;
              _app.iteam.avatar = result.data.avatar;
              _app.iteam.realname = result.data.realname;
              _app.user.isAttended = result.data.attend;
            }else{
            }
          },
          error:function(){

          }
        });
      },
      ajaxAttend:function(){
        // alert(1);
        var mixnick = _storage.get('mixnick');
        var iteamid = util.url.params('id');
        if(!_app.status.ajaxAttend){
          alert('请勿重复提交');
          return;
        }
        // alert(util.url.getCookie('cccc'));
        // alert(JSON.stringify(_app.user));
        if(window.login==false){
          alert('请先登录');
          return;          
        }
        if(_app.user.account==''||_app.user.name==''||iteamid==''||(_app.user.service==''&&_app.iteam.total<=0)){
           alert('输入信息有误！');
           return;
        }
        if(!util.checkUser(_app.user.account)){
          alert('请填写正确的淘宝账号');
          return;
        }
        if(!util.checkUser(_app.user.name)||!util.checkSpecial(_app.user.name)){
          alert('请填写正确的姓名');
          return;
        }
        if(!util.checkMobile(_app.user.phone)){
          alert('请填写正确的手机号');
          return;
        }
        _app.status.ajaxAttend = true;
        // alert(2);
        $.ajax({
          type:'POST',
          url:'/groupon/iteam/attend',
          dataType:'json',
          data:{
            mixnick : mixnick,
            wangwang : _app.user.account,
            name : _app.user.name,
            phone : _app.user.phone,
            service : _app.user.service,
            iteamid : iteamid
          },
          success:function(result,cc){
            console.log(result);
            // alert(cc);
            // alert(JSON.stringify(result));
            if(!result.errCode){
              if(Tida.isSupportedApp){
                // alert('attend');
                _app.status.attend = false;
                _app.status.attendSuccess = true;
                _app.ajaxGetList();
              }else if(0){
                var url = encodeURIComponent('https://vrbuy.ews.m.jaeapp.com/groupon/index?id='+util.url.params('id'));
                util.url.setCookie('share','123');
                var oauthurl = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx6d5c659db53fee95&redirect_uri='+url+'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
                location.href = oauthurl;
              }else{
                _app.status.attend = false;
                _app.status.attendSuccess = true;
                _app.ajaxGetList();
              }
            }else{
              alert('请勿重复报名');
            }
          },
          error:function(error){
            alert(JSON.stringify(error));
          }
        });
      },
      appShare:function(){//分享
        if(Tida.isSupportedApp){
          // alert('TBshare');
          var iteamid = util.url.params('id');
          var url = 'https://vrbuy.ews.m.jaeapp.com/groupon/index.html?id='+iteamid;
          Tida.share({
            title:'业主团购惠',
            text:'业主团购惠',
            content:'最高享300元豪礼，天猫方太官方旗舰店购满1500元任意产品即可组团领福利',
            url:url,
            image:'https://vrbuy.ews.m.jaeapp.com/groupon/static/images/share2.jpg',
            target:[0,1,2,3,4,5,6,7],
            weixinAppId:'',
            weixinMsgType:'image',
            isAliUrl:true,
          }, function(data){
            console.log('share');
          });
        }else{
          alert('分享');
          //移除微信 _app.showWxshare();
        }
      }
    },
    components: {}
  }
</script>